<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 实现一级二级菜单</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            background: #eeee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            /*width: 90px;*/ /*  固定宽度 字数多以后 会换行 */
            /*   padding: 0 10px; *//* 解决方案 不给固定宽度 给边距*/

            line-height: 40px; /*垂直居中*/
            text-align: center; /* 水平居中 */

            position: relative;
        }

        /**/
        a {
            text-decoration: none;
            color: black;
            padding: 0 10px;
        }

        a:hover {
            color: #fff;
            background: red;
            display: block;
        }

        ul li ul li {
            /*1 取消浮动  */
            float: none;
            background: #eee;
            margin-top: 2px;
        }

        ul li ul {
            /* 相对于父级别进行绝对定位  防止二级菜单影响 到1级菜单的宽度 */
            position: absolute;
            left: 0;
            top: 40px;
            display: none; /* 隐藏二级菜单 */
        }

        ul li:hover ul {
            /* 隐藏二级菜单 --》 显示二级菜单  */
            display: block;
        }

        ul li ul li a:hover {
            background: #06f;
        }

        .clearfix {
            overflow: hidden;
            _zoom: 1;
        }
    </style>
</head>
<body>

<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
            <ul>
                <!-- /*1 取消浮动  */ -->
                <li><a href="#">python</a></li>
                <li><a href="#">go</a></li>
                <li><a href="#">java</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>

            </ul>
        </li>
        <li><a href="#">关于我们</a></li>
    </ul>


</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<pre class="clearfix">
    要点 ：
    一级菜单 进行相对定位;
    二级菜单 进行绝对定位;  left:0;  top值等于一级的高度, 对二级菜单进行隐藏， 鼠标经过 一级菜单 则显示为block
</pre>

</body>
</html>